<script setup>
import { computed, h } from 'vue'
import { NSpace, useThemeVars } from 'naive-ui'
import { types, typesBgColor, typesColor, typesShortName } from '@/consts/support_redis_type.js'
import { get, map, toUpper } from 'lodash'
import RedisTypeTag from '@/components/common/RedisTypeTag.vue'

const props = defineProps({
  value: {
    type: String,
    default: 'ALL',
  },
  placement: {
    type: String,
    default: 'bottom-start',
  },
})

const emit = defineEmits(['update:value', 'select'])

const options = computed(() => {
  const opts = map(types, (v) => ({
    label: v,
    key: v,
  }))
  return [{ label: 'ALL', key: 'ALL' }, ...opts]
})

const themeVars = useThemeVars()
const renderIcon = (option) => {
  return h(RedisTypeTag, {
    type: option.key,
    defaultLabel: 'A',
    short: true,
    size: 'small',
    inverse: option.key === props.value,
  })
}

const renderLabel = (option) => {
  const children = [
    h(
      'div',
      {
        style: {
          fontWeight: option.key === props.value ? 'bold' : 'normal',
        },
      },
      option.label,
    ),
    h(
      'div',
      { style: { width: '16px' } },
      h(RedisTypeTag, {
        type: toUpper(option.key),
        point: true,
        style: { display: option.key === props.value ? 'block' : 'none' },
      }),
    ),
  ]
  return h(NSpace, { align: 'center', wrapItem: false }, () => children)
}

const fontColor = computed(() => {
  return get(typesColor, props.value, '')
})

const backgroundColor = computed(() => {
  return get(typesBgColor, props.value, '')
})

const displayValue = computed(() => {
  return get(typesShortName, toUpper(props.value), 'A')
})

const handleSelect = (select) => {
  if (props.value !== select) {
    emit('update:value', select)
    emit('select', select)
  }
}
</script>

<template>
  <n-dropdown
    :options="options"
    :placement="props.placement"
    :render-icon="renderIcon"
    :render-label="renderLabel"
    show-arrow
    @select="handleSelect">
    <n-tag
      :bordered="true"
      :color="{ color: backgroundColor, textColor: fontColor }"
      class="redis-tag"
      size="medium"
      strong>
      {{ displayValue }}
    </n-tag>
  </n-dropdown>
</template>

<style lang="scss" scoped>
.redis-tag {
  padding: 0 10px;
}

:deep(.dropdown-type-item) {
  padding: 10px;
}
</style>
